import 'dart:async';

import 'package:draggable_float_widget/draggable_float_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mall/constant/app_colors.dart';
import 'package:mall/gen/r.dart';
import 'package:mall/router/route_names.dart';
import 'package:mall/ui/widgets/default_bg.dart';
import 'package:mall/utils/image_component/image_component.dart';
import 'package:mall/utils/image_component/image_preview_dialog.dart';

class SquarePage extends StatefulWidget {
  const SquarePage({super.key});

  @override
  State<SquarePage> createState() => _SquarePageState();
}

class _SquarePageState extends State<SquarePage> {
  final StreamController<OperateEvent>? eventStreamController = StreamController.broadcast();

  final imageUrls = [
    R.image.ceshi.path,
    R.image.ceshi.path,
    R.image.ceshi.path,
    R.image.ceshi.path,
    R.image.ceshi.path,
  ];

  @override
  Widget build(BuildContext context) {
    return APPScaffold(
      title: '广场',
      body: Stack(
        children: [
          //广场
          NotificationListener(
            onNotification: (notification) {
              if (notification is ScrollStartNotification) {
                eventStreamController?.add(OperateEvent.OPERATE_HIDE);
              } else if (notification is ScrollEndNotification) {
                eventStreamController?.add(OperateEvent.OPERATE_SHOW);
              }
              return true;
            },
            child: ListView.separated(
              padding: EdgeInsets.all(15),
              itemBuilder: (context, index) {
                return Container(
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Column(
                    children: [
                      //内容
                      _content(),
                      SizedBox(height: 15),
                      //评论和点赞 操作
                      options(),
                      SizedBox(height: 15),
                      //评论展示
                      _comment(),
                    ],
                  ),
                );
              },
              itemCount: 10,
              separatorBuilder: (context, index) => SizedBox(height: 10),
            ),
          ),
          //悬浮窗
          DraggableFloatWidget(
            child: ImageComponent(R.image.squareFabu.path, width: 94, height: 104),
            eventStreamController: eventStreamController,
            config: DraggableFloatWidgetBaseConfig(
              isFullScreen: false,
              initPositionYInTop: false,
              initPositionXInLeft: false,
              initPositionYMarginBorder: 50,
              borderBottom: kBottomNavigationBarHeight + 20,
            ),
            onTap: () => Get.toNamed(MobileRouteNames.squarePubPage),
          )
        ],
      ),
    );
  }

  Widget _comment() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ListView.separated(
          itemCount: 2,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          separatorBuilder: (BuildContext context, int index) {
            return SizedBox(height: 5);
          },
          itemBuilder: (BuildContext context, int index) {
            return RichText(
                text: TextSpan(children: [
              TextSpan(
                text: '大音希声519:',
                style: TextStyle(color: AppColors.C_222222, fontWeight: FontWeight.bold, fontSize: 12),
              ),
              TextSpan(
                text: '我不相信我不相信。我吃了这就和犯我不相信我不相信。我吃了这就和犯得上发射点',
                style: TextStyle(color: AppColors.C_666666, fontSize: 12),
              ),
            ]));
          },
        ),
        SizedBox(height: 10),
        //查看全部评论
        InkWell(child: Text('查看全部评论', style: TextStyle(color: AppColors.C_999999, fontSize: 12))),
      ],
    );
  }

  Row options() {
    return Row(
      children: [
        //点赞
        _optionBtn(
          imagePath: R.image.squareDianzanFalse.path,
          count: '10',
          onTap: () {},
        ),
        SizedBox(width: 30),
        //评论
        _optionBtn(
          imagePath: R.image.squarePinglun.path,
          count: '123',
          onTap: () {},
        ),
      ],
    );
  }

  InkWell _optionBtn({required Function() onTap, required String imagePath, required String count}) {
    return InkWell(
      onTap: onTap,
      child: Row(
        children: [
          ImageComponent(imagePath, size: 17),
          SizedBox(width: 5),
          Text(count, style: TextStyle(fontSize: 11, color: AppColors.C_8B8B8B)),
        ],
      ),
    );
  }

  Row _content() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //头像
        ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: ImageComponent(
            R.image.ceshi.path,
            size: 40,
          ),
        ),
        SizedBox(width: 10),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //标题
              Text(
                '矛头',
                style: TextStyle(
                  fontSize: 15,
                  color: AppColors.C_222222,
                ),
              ),
              SizedBox(height: 8),

              //内容
              Text(
                '仔一见到我就立马跳起来搂着我不撒爪 心 过年一段时间没见',
                style: TextStyle(
                  fontSize: 13,
                  color: AppColors.C_222222,
                ),
                maxLines: 10,
              ),
              SizedBox(height: 8),

              //图片
              _imagsWidget(),
            ],
          ),
        )
      ],
    );
  }

  Widget _imagsWidget() {
    return GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      gridDelegate: imageUrls.length > 1
          ? SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
            )
          : SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 173),
      itemCount: imageUrls.length,
      itemBuilder: (context, index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: InkWell(
            onTap: () {
              Get.dialog(ImagePreviewDialog(imgList: imageUrls, index: index));
            },
            child: ImageComponent(
              imageUrls[index],
            ),
          ),
        );
      },
    );
  }
}
